<template>
  <div class="box">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); background: #fff"
      title="AI线索池"
      @back="() => $router.back()"
    />
    <section class="tab-list">
      <a-tabs v-model:activeKey="activeKey" @change="activeChange">
        <a-tab-pane v-for="tab in tabList" :key="tab.key" :tab="tab.title" />
        <template #rightExtra>
          <a-button class="downLoad" @click="downLoad" v-if="activeKey == 2"
            ><DownloadOutlined />导出</a-button
          >
        </template>
      </a-tabs>
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ x: 'max-content' }"
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        key="id"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'call_status'">
            <span>{{ text == 1 ? "已接通" : "未接通" }}</span>
          </template>
          <template v-if="column.key === 'call_stage'">
            <span>{{ text == 1 ? "人工初访" : "AI初访" }}</span>
          </template>
          <template v-if="column.key === 'tel_arr'">
            <span v-if="record.valid_tel_arr">{{
              record.valid_tel_arr[0]
            }}</span>
          </template>
          <template v-if="column.key === 'address'">
            <span>{{
              record.province + " - " + record.city + " - " + record.village
            }}</span>
          </template>
        </template>
      </a-table>
    </section>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, computed, watch, toRefs } from "vue";
import request from "../../../common/utils/request";
import { DownloadOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "AiClues",
  components: { DownloadOutlined },
  setup() {
    const state = reactive({
      activeKey: 1,
      tabList: [
        {
          title: "初步线索",
          key: 1,
        },
        {
          title: "有效线索",
          key: 2,
        },
      ],
      dataSource: [],
      columns: [
        {
          title: "企业名称",
          dataIndex: "business_name",
          width: 200,
        },
        {
          title: "法定代表人",
          dataIndex: "legal_people",
          width: 200,
        },
        {
          title: "企业联系电话",
          dataIndex: "tel_arr",
          key: "tel_arr",
          width: 200,
        },
        {
          title: "注册资本",
          dataIndex: "registered_money",
          width: 200,
        },
        {
          title: "成立日期",
          dataIndex: "created_data",
          width: 200,
        },
        {
          title: "企业所在地",
          dataIndex: "address",
          key: "address",
          width: 200,
        },
        {
          title: "统一社会信用代码",
          dataIndex: "social_code",
          width: 200,
        },
        {
          title: "企业类型",
          dataIndex: "business_type",
          width: 200,
        },
        {
          title: "所属行业",
          dataIndex: "industry",
          width: 200,
        },
        {
          title: "企业地址",
          dataIndex: "new_address",
          width: 200,
        },
      ],
      page: 1,
      limit: 50,
      total: 0,
      loading: false,
    });

    // 分页
    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.limit,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "30", "40", "50"],
    }));
    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.limit = pager.pageSize;
      if (state.activeKey == 1) {
        orgClue();
        return;
      }
      valid_clue();
    };

    // 初步线索列表
    const orgClue = () => {
      let params = {};
      params.page = state.page;
      params.pageSize = state.limit;
      state.loading = true;
      request.get("/org", "/business/org_clue", { ...params }).then((res) => {
        state.dataSource = res.list;
        state.loading = false;
        state.total = res.total;
      });
    };
    orgClue();

    // 有效线索列表
    const iframe = document.createElement("iframe"); //导出
    const valid_clue = (is_export) => {
      let params = {};
      if (is_export == 1) {
        params.is_export = is_export;
      } else {
        params.page = state.page;
        params.pageSize = state.limit;
        state.loading = true;
      }
      request.get("/org", "/business/valid_clue", { ...params }).then((res) => {
        if (is_export == 1) {
          iframe.src = res.result.fileUrl;
          iframe.style.display = "none";
          document.body.appendChild(iframe);
          setTimeout(() => {
            document.body.removeChild(iframe);
          }, 1000);
          return;
        }
        state.dataSource = res.list;
        state.loading = false;
        state.total = res.total;
      });
    };

    // 线索切换
    const activeChange = (active) => {
      state.page = 1;
      state.limit = 50;
      if (active == 1) {
        // 初步线索
        state.columns = [
          {
            title: "企业名称",
            dataIndex: "business_name",
            width: 200,
          },
          {
            title: "法定代表人",
            dataIndex: "legal_people",
            width: 200,
          },
          {
            title: "企业联系电话",
            dataIndex: "tel_arr",
            key: "tel_arr",
            width: 200,
          },
          {
            title: "注册资本",
            dataIndex: "registered_money",
            width: 200,
          },
          {
            title: "成立日期",
            dataIndex: "created_data",
            width: 200,
          },
          {
            title: "企业所在地",
            dataIndex: "address",
            key: "address",
            width: 200,
          },
          {
            title: "统一社会信用代码",
            dataIndex: "social_code",
            width: 200,
          },
          {
            title: "企业类型",
            dataIndex: "business_type",
            width: 200,
          },
          {
            title: "所属行业",
            dataIndex: "industry",
            width: 200,
          },
          {
            title: "企业地址",
            dataIndex: "new_address",
            width: 200,
          },
        ];
        orgClue();
        return;
      }
      // 有效线索
      state.columns = [
        {
          title: "客户名称",
          dataIndex: "business_name",
          width: 200,
        },
        {
          title: "联系方式",
          dataIndex: "tel_number",
          width: 200,
        },
        {
          title: "负责人",
          dataIndex: "label_people",
          width: 200,
        },
        {
          title: "客户分配时间",
          dataIndex: "allot_time",
          width: 200,
        },
        {
          title: "最后通话时长",
          dataIndex: "call_time",
          width: 200,
        },
        {
          title: "意向标签",
          dataIndex: "intention_tag",
          width: 200,
        },
        {
          title: "客户标签",
          dataIndex: "customer_tag",
          width: 200,
        },
        {
          title: "最后跟进时间",
          dataIndex: "follow_time",
          width: 200,
        },
        {
          title: "最后通话状态",
          dataIndex: "call_status",
          key: "call_status",
          width: 200,
        },
        {
          title: "最后跟进阶段",
          dataIndex: "call_stage",
          key: "call_stage",
          width: 200,
        },
      ];
      valid_clue();
    };

    // 导出

    const downLoad = () => {
      valid_clue(1);
    };

    return {
      ...toRefs(state),
      pagination,
      handleTableChange,
      activeChange,
      downLoad,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  .tab-list {
    margin: 10px;
    background: #fff;
    height: 100%;
    .downLoad {
      margin-right: 20px;
    }
  }
}
</style>
